import React, { Component, Fragment } from 'react';
import { Text, View, StyleSheet, TextInput, ActivityIndicator, FlatList,ToastAndroid,TouchableHighlight,Image } from 'react-native';
import HttpUtil from '../../utils/HttpUtil';
class Search extends Component {
  constructor() {
    super();
    this.state = {
      query: '',
      searchResult:[],
      opacity:0,
    };
  }
  getQuery(query) {
    console.log(query);
    this.setState({
      query: query,
      finish:false
    });
  }
  search() {
      //console.log(this.state.searchResult);
      this.setState({
        finish:true,
      })
    HttpUtil.get(
      `https://www.mxnzp.com/api/music/song/search?keyWord=${
        this.state.query
      }&page=1`
    ).then(res => {
      console.log(res);
      if(res.code === 1){
        this.setState({
            searchResult:res.data.list,
            finish:false,
          });
      }else{
        ToastAndroid.show('没有搜索结果', ToastAndroid.SHORT);
        this.setState({
            searchResult:[],
            finish:false,
        })
      }
    });
  }
  renderItem(item) {
    console.log(item);
    return (
       
      <TouchableHighlight
        underlayColor="rgba(34,26,38,0.1)"
      >
        <View style={{ flexDirection: "row" }}>
          <View style={{ padding: 25 }}>
            {/* <Image
              source={{ uri: item.item.pic_small }}
              style={{ width: 100, height: 100 }}
            /> */}
          </View>
          <View style={{ marginTop: 40 }}>
            <Text style={{ fontSize: 24 }}>{item.item.songName}</Text>
            <View style={{ flexDirection: "row", marginTop: 20 }}>
              <Text>{item.item.artistName}</Text>
              <Text style={{ marginLeft: 20 }}>{item.item.albumName}</Text>
            </View>
          </View>
        </View>
      </TouchableHighlight>
    );
  }
  render() {
    return (
      <Fragment>
        <View style={styles.container}>
          <View
            style={{
              paddingTop: 7,
              paddingLeft: 7,
              paddingRight: 7,
              borderColor: 'rgba(100,53,201,0.1)',
              borderBottomWidth: 1,
            }}
          >
            <TextInput
              style={{ height: 50 }}
              placeholder="搜索"
              autoFocus
              autoCorrect
              placeholderTextColor="#6435c9"
              editable={true}
              keyboardType="numeric"
              multiline
              onChangeText={query => {
                this.getQuery(query);
              }}
              onSubmitEditing={() => {
                this.search();
              }}
            />
            <ActivityIndicator style={{position:'absolute',right:10,top:20}}
            animating={this.state.finish}/>
            {this.state.searchResult.length === 0?null:<FlatList style={{marginBottom:60}} data={this.state.searchResult} renderItem={this.renderItem.bind(this)}/>}
          </View>
        </View>
      </Fragment>
    )
    
  }
}
const styles = StyleSheet.create({
  container: {
    backgroundColor: '#eae7ff',
    flex: 1,
    justifyContent: 'flex-start',
  },
});
export default Search;
